<template>
<div class="fish">
  <!-- 鱼尾 -->
  <div class="fish-tail"></div>
  <!-- 鱼身 -->
  <div class="fish-bone">
    <!-- 上半部分鱼刺 -->
    <section class="bone-main bone-top">
      <!-- 鱼尾部分占位 -->
      <div class="bone-tail"></div>
      <!-- 内容展示部分 -->
      <div class="bone-spur" v-for="item in info.top" :key="item.id">
        <div class="spur-box">
          <ul class="spur-list">
            <li class="list-item list-title"><span class="title-content">{{item.title}}</span></li>
            <li class="list-item" v-for="listItem in item.list" :key="listItem.id"><p class="item-content" @click="toUrlDetail(listItem.url)">{{listItem.title}}</p></li>
          </ul>
        </div>
      </div>
    </section>
    <!-- 脊梁骨 -->
    <section class="bone"></section>
    <!-- 下半部分鱼刺 -->
    <section class="bone-main bone-bottom">
      <!-- 鱼尾部分占位 -->
      <div class="bone-tail"></div>
      <!-- 内容展示部分 -->
      <div class="bone-spur" :class="index===1?'bone-flex':''" v-for="(item,index) in info.bottom" :key="item.id">
        <div class="spur-box">
          <ul class="spur-list">
            <li class="list-item" v-for="listItem in item.list" :key="listItem.id"><p class="item-content" @click="toUrlDetail(listItem.url)">{{listItem.title}}</p></li>
            <li class="list-item list-title"><p class="title-content">{{item.title}}</p></li>
          </ul>
        </div>
      </div>
    </section>
  </div>
  <!-- 鱼头 -->
  <div class="fish-header" :style="{backgroundImage: `url('${info.header}')`}"></div>
</div>
</template>

<script>
/**
 * 厦门人才基地 - 鱼骨组件
 * 2021-05-10 施义煌
 */
export default {
  props: {
    /**
     * 参数说明
     * info: {
     *  header: '', 鱼头图片
     *  top: [ 上半部分鱼刺
     *    {
     *      id: '', 唯一值
     *      title: '', 模块名称
     *      list: [ 模块list数组
     *        {
     *          id: '', 唯一值
     *          title: '', 标题
     *          url: '' 跳转页面路径
     *        }
     *      ]
     *    }
     *  ],
     *  下半部分鱼刺
     *  bottom: []
     * }
     */
    info: { // 展示的数据信息
      type: Object,
      required: true
    }
  },
  methods: {
    /**
     * 跳转url详情
     */
    toUrlDetail (url) {
      if (!url) {
        return;
      } else {
        window.open(url, '_blank');
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
// 组件容器
.fish{
  display: flex;
  width: 1200px;
  // 鱼头
  .fish-header{
    width: 326px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('../../static/img/talents/fish/fish-header.png');
  }
  // 鱼尾
  .fish-tail{
    width: 152px;
    background-repeat: no-repeat;
    background-position: center 68px;
    background-image: url('../../static/img/talents/fish/fish-tail.png');
  }
}
// 中间鱼骨主体部分
.fish-bone{
  position: relative;
  width: 721px;
  height: 390px;
  margin: 0;
  .bone-main{
    display: flex;
    height: calc(50% - 2px);
      .bone-spur{
        flex: 1;
        padding-right: 40px;
        // overflow: hidden;
        .spur-box{
          bottom: 0;
          border-right: solid 2px #fff;
          border-image: linear-gradient(#A2D672, #08ABB5) 1 1;
          border-radius: 8px;
          .spur-list{
            text-align: right;
            .list-item{
              height: 30px;
              line-height: 30px;
              border-radius: 4px;
              cursor: pointer;
              overflow: hidden;
              .item-content{
                display: inline-block;
                position: relative;
                height: 100%;
                padding: 0 20px;
                border-bottom: solid 1px #fff;
                border-image: linear-gradient(#A2D672, #08ABB5) 1 1;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-size: 14px;
                font-weight: 400;
                color: #fff;
                overflow: hidden;
              }
            }
            .list-title{
              padding: 0;
              margin-right: -2px;
              .title-content{
                display: inline-block;
                height: 100%;
                padding: 0 20px;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-size: 18px;
                font-weight: 500;
                color: #fff;
                background: linear-gradient(135deg, #A2D672 0, #08ABB5 100%);
              }
            }
          }
        }
      }
      // 鱼尾占位
      .bone-tail{
        width: 50px;
      }
  }
  // 脊梁骨
  .bone{
    position: relative;
    z-index: 9;
    width: calc(100% + 12px);
    height: 4px;
    margin-top: -2px;
    margin-left: -6px;
    background: linear-gradient(270deg, #A2D672 0, #08ABB5 100%);
  }
  // 上半部分鱼骨
  .bone-top{
    align-items: flex-end;
    .bone-spur{
      padding-right: 40px;
      .spur-box{
        border-image: linear-gradient(#08ABB5, #A2D672) 1 1;
        transform: rotate(-20deg);
        transform-origin: right bottom;
        .spur-list{
          padding-bottom: 20px;
          .list-item{
            transform: rotate(20deg);
            transform-origin: right bottom;
          }
          .list-title{
            margin-bottom: 12px;
            .title-content{
              border-radius: 8px 8px 0 8px;
            }
          }
        }
      }
    }
  }
  // 下班部分鱼骨
  .bone-bottom{
    align-items: flex-start;
    .bone-spur{
      padding-right: 60px;
      .spur-box{
        border-image: linear-gradient(#08ABB5, #A2D672) 1 1;
        transform: rotate(20deg);
        transform-origin: right top;
        .spur-list{
          padding-top: 20px;
          .list-item{
            transform: rotate(-20deg);
            transform-origin: right bottom;
          }
          .list-title{
            margin-top: 12px;
            margin-right: -12px;
            .title-content{
              border-radius: 8px 0 8px 8px;
            }
          }
        }
      }
    }
    .bone-flex {
      flex: 2;
      padding-right: 50px;
    }
  }
}
</style>